import { useEffect, useState } from 'react';
import { Link, useParams } from 'react-router-dom';
import markdown from '../../../lib/markdown';

import Apis from '../../../api';
import { Post } from '../../../types';

import styles from './index.scss';

function PagePost() {
  const { postId } = useParams<{ postId: string }>();
  const [post, setPost] = useState<undefined | Post>();

  useEffect(() => {
    Apis.Post.getPost(+postId)
      .then((it) => setPost(it))
      .catch((err) => console.error(err));
  }, [postId]);

  if (post) {
    return (
      <div>
        <h1>{post.title}</h1>
        <small>
          <Link to={`/post/editor/${post.postId}`}>修改</Link>
        </small>
        <div className={styles['md']} dangerouslySetInnerHTML={{ __html: markdown(post.content) }}></div>
      </div>
    );
  } else {
    return <div>加载中</div>;
  }
}

export default PagePost;
